<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
// 引入中国地图的JSON数据
import chinaJSON from './china.json'
// 获取DOM元素
let map = ref()
// 注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
    let mychart = echarts.init(map.value)
    // 设置配置项
    mychart.setOption({
        // 地图组件
        geo: {
            map: 'china',
            roam: true,  // 鼠标缩放的效果
            // 地图的位置调试
            left: 50,
            top: 80,
            right: 50,
            bottom: 30,
            // 地图上的文字的设置
            label: {
                show: true,  // 地图上各个地区文字显示出来
                color: 'white',
                fontSize: 13
            },

            itemStyle: {
                // 每一个多边形的样式
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: "rgba(3,27,78,0.75)"  //0%处的颜色
                    }, {
                        offset: 1, color: "rgba(58,149,253,0.75)"  // 100%处的颜色
                    }],
                    global: false,  // 缺省为false
                },
                opacity: .8,
                borderColor: 'rgba(58,149,253,0.75)',
                borderWidth: 2
            },
            // 地图高亮的效果
            emphasis: {
                itemStyle: {
                    color: 'rgba(58,149,253,0.75)',
                    borderColor: 'white',
                    borderWidth: 2
                },
                label: {
                    fontSize: 20,
                    color: 'white'
                }
            }
        },
        // 布局位置
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        },
        series: [
            {
                type: 'lines',  // 航线的系列
                data: [
                    {
                        coords: [
                            [116.405285, 39.904989],  // 航线起点
                            [119.306239, 26.075302]  // 航线终点
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },

                    },
                    {
                        coords: [
                            [116.405285, 39.904989],  // 航线起点
                            [114.298572, 30.584355]  // 航线终点
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },

                    },
                    {
                        coords: [
                            [119.306239, 26.075302],  // 航线起点
                            [116.405285, 39.904989]   // 航线终点
                              
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },

                    },
                    {
                        coords: [
                            [114.298572, 30.584355],  // 航线起点
                            [116.405285, 39.904989]  // 航线终点
                            
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },

                    },
                    {
                        coords: [
                              
                            [116.405285, 39.904989],  // 航线起点
                            [127.9688, 45.368]  // 航线终点
                            
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },
                    },
                    {
                        coords: [
                            [127.9688, 45.368],
                            [116.405285, 39.904989]  
                            
                            
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },
                    },
                    {
                        coords: [
                            [116.405285, 39.904989],  // 航线起点
                            [87.9236, 43.5883]  // 航线终点
                            
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },
                    },
                    {
                        coords: [
                            [87.9236, 43.5883],
                            [116.405285, 39.904989] // 航线起点
                              // 航线终点
                            
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },
                    },
                    {
                        coords: [
                            [116.4551, 40.2539],
                            [91.11, 29.97]       
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },
                    },
                    {
                        coords: [
                            [91.11, 29.97],
                            [116.4551, 40.2539]
                                   
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'white',
                            width: 3,
                        },
                    },
                    
                ],
                // 是否显示特效
                effect: {
                    show: true,
                    trailLength: 0.01,
                    symbol: 'path://M 651.017 851.753 a 21.2205 21.2205 0 0 1 -4.74074 -0.541799 l -136.037 -29.4377 l -132.425 29.4377 a 22.575 22.575 0 0 1 -27.4511 -22.0783 v -66.1898 a 22.575 22.575 0 0 1 13.0032 -20.4529 l 82.218 -38.558 l -7.31429 -119.286 l -254.646 84.5206 a 22.6201 22.6201 0 0 1 -29.7086 -21.4011 v -98.2462 a 22.575 22.575 0 0 1 11.3778 -19.5951 l 261.463 -149.491 l -6.54674 -117.57 a 87.1393 87.1393 0 0 1 23.5683 -65.5577 c 16.6152 -17.5182 39.2804 -27.1802 63.842 -27.1802 h 8.66878 c 24.5616 0 47.272 9.61693 63.7968 27.0899 c 16.6152 17.6085 25.0131 40.951 23.6134 65.6931 l -6.54674 117.616 l 261.463 149.491 a 22.575 22.575 0 0 1 11.3778 19.5951 v 98.2462 a 22.3944 22.3944 0 0 1 -9.39118 18.2857 a 22.9362 22.9362 0 0 1 -20.3175 3.11534 l -254.555 -84.8818 l -7.35944 119.647 l 82.1277 38.5129 a 22.575 22.575 0 0 1 13.0032 20.4529 v 66.1898 a 22.575 22.575 0 0 1 -22.4847 22.575 Z m -140.868 -75.6712 c 1.6254 0 3.20564 0.1806 4.78589 0.541799 l 113.507 24.5616 v -23.8392 l -77.9739 -36.5263 a 30.8825 30.8825 0 0 1 -17.7439 -29.9344 l 9.12028 -147.821 a 30.7019 30.7019 0 0 1 13.4547 -23.5683 a 29.212 29.212 0 0 1 17.2021 -5.10194 c 0.767549 0 4.33439 0.1806 5.05679 0.2709 a 25.284 25.284 0 0 1 4.87619 1.03845 l 242.41 80.8635 v -53.8187 L 567.128 415.379 a 30.7019 30.7019 0 0 1 -15.5316 -28.5347 l 6.99824 -126.42 a 42.7118 42.7118 0 0 0 -11.3778 -32.1467 a 42.1249 42.1249 0 0 0 -31.018 -12.958 h -8.66878 a 42.3506 42.3506 0 0 0 -31.0631 13.0483 a 42.4409 42.4409 0 0 0 -11.2875 31.9661 l 6.99824 126.555 a 30.7019 30.7019 0 0 1 -15.4864 28.4896 l -257.761 147.369 v 53.8638 l 245.119 -81.3601 a 28.6702 28.6702 0 0 1 24.3358 4.10864 a 31.1534 31.1534 0 0 1 13.6353 23.5231 l 9.12028 148.092 a 30.5665 30.5665 0 0 1 -17.8342 29.8441 l -77.7933 36.5263 v 23.7037 l 109.759 -24.4261 a 22.4395 22.4395 0 0 1 4.87619 -0.541799 Z',
                    color: 'white',
                    symbolSize: 25
                },
                lineStyle: {
                    normal: {
                        width: 0.5,
                        opacity: 0.6,
                        curveness: 0.2,
                        color: '#17F5FF'
                    }
                }
            }
        ]
    })
})
</script>

<template>
    <div class="box4" ref="map">
        我是地图组件
    </div>
</template>

<style lang="scss" scoped></style>